<button class="btn btn-dark" (click)="toTopOfScreen()" id="toTopButton" title="Go to top">
    <img class="img-fluid cardIcon" id="topBtn" src="{{'assets/images/btn_arrow.png'}}">
</button>
<div *ngIf="isLoaded == false" class="loader" id="backdrop">
    <div class="spinner-border text-light" role="status">
        <span class="sr-only mx-auto">Loading...</span>
    </div>
</div>

<div class="row justify-content-center">
    <div class="col-10 text-center bg-dark p-4 my-2" [innerHTML]="'MERCH-LIST.DECLAIM' | translate">
    </div>
    <div class="row justify-content-center p-2" style="width: 100%;">
        <div class="col-12 col-md-10 row justify-content-around m-2">
            <div class="col">
                <label for="character">{{'KEYWORD.CHARACTER' | translate}}</label>
                <select [(ngModel)]="filterOptions[0]" (ngModelChange)="filterMerchs()" class="custom-select"
                    name="character">
                    <option value="All">All</option>
                    <option value="LUKE">{{'KEYWORD.LUKE' | translate}}</option>
                    <option value="ARTEM">{{'KEYWORD.ARTEM' | translate}}</option>
                    <option value="VYN">{{'KEYWORD.VYN' | translate}}</option>
                    <option value="MARIUS">{{'KEYWORD.MARIUS' | translate}}</option>
                    <option value="Other">{{'MERCH-LIST.OTHER' | translate}}</option>
                </select>
            </div>
            <div class="col">
                <label for="rarity">{{'MERCH-LIST.SERIES' | translate}}</label>
                <select [(ngModel)]="filterOptions[1]" (ngModelChange)="filterMerchs()" class="custom-select"
                    name="series">
                    <option value="All">All</option>
                    <option *ngFor="let s of allSeries" value="{{s.name}}">{{s.name}}</option>
                </select>
            </div>
            <div class="col">
                <label for="type">{{'MERCH-LIST.SELL-TIME-TYPE' | translate}}</label>
                <select [(ngModel)]="filterOptions[2]" (ngModelChange)="filterMerchs()" class="custom-select"
                    name="sellTimeType">
                    <option value="All">All</option>
                    <option value="PERMANENT">{{'MERCH-LIST.PERMANENT' | translate}}</option>
                    <option value="LIMITED-TIME">{{'MERCH-LIST.LIMITED-TIME' | translate}}</option>
                </select>
            </div>
            <div class="col-1">
                <a (click)="resetFilters()">
                    <img src="assets/images/btn_reset.png">
                </a>
            </div>
        </div>
        <div class="col-12 col-md-10 my-2 row">
            <div class="col-4 col-md-3 col-lg-2" *ngFor="let m of merches">
                <a class="merch-link" [routerLink]="['/merch-detail/']" [queryParams]="{id: m._id}" target="_blank">
                    <div class="bg-dark p-3 m-1 merch-card">
                        <img class="img-fluid" src="{{m.images[0]}}">
                        {{m.name}}
                    </div>
                </a>
            </div>
        </div>
    </div>
</div>